<template>
	<view class="">
		<view class="scroll_header"></view>
		<view class="relative" style="z-index: 5;">
			<view class="choose_year" @click="all_shops_choose">
				<view class="choose-content flex">
					<view class="txt">{{date_name}}</view>
					<image class="down_img" src="../../static/images/promotion/underneath.png.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="absolute" style="z-index: 5;" v-show="all_types">
				<view class="all-shop-pop flex">
					<view class="all-shop-width flex" :current="current1" @click="choose_type(item)"
						v-for="(item,index) in type_list" :key="index">
						<view :class="current1 == index+1 ? 'data-list-xz flex' : 'data-list flex'">
							<view :class="current1 == index+1 ? 'tit-top-xz' : 'tit-top'">{{item.type_name}}</view>
							<image class="duiimg" v-if="current1 == index+1" src="../static/xuan_z.png" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="">
					<view class="flex ziding_width">
						<view class="ziding">自定义时间</view>
						<image class="down_img" src="../../static/images/promotion/underneath.png.png" mode="widthFix">
						</image>
					</view>
					<!-- 时间选择 -->
					<view class="data-width">
						<picker style="font-size: 30rpx;" mode="date" :value="date" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
						<view class="zhi">至</view>
						<picker style="font-size: 30rpx;" mode="date" :value="date_end" :start="startDate"
							:end="endDate" @change="bindDateChangeEnd">
							<view class="uni-input">{{date_end}}</view>
						</picker>
					</view>
					<!-- 确定 -->
					<view class="btn_list">
						<view class="quxiao_btn" @click="quxiao">取消</view>
						<view class="queren_btn" @click="queren">确认</view>
					</view>
				</view>

			</view>
			<uv-overlay :show="show" @click="guanbi(e)" zIndex="-1"></uv-overlay>
		</view>
		<!-- 商品数量 -->
		<view class="shangpin_list" style="z-index: -2;position: relative;">
			<view class="num-sp">
				<view class="shangpin">商品数：{{shops_datas.count}}</view>
				<view class="shangpin"></view>
				<view class="shangpin">销售额：{{shops_datas.price}}</view>
				<view class="shangpin">销 &nbsp;&nbsp;量：{{shops_datas.sales}}</view>
				<view class="shangpin">毛 &nbsp;&nbsp; 利：{{shops_datas.price2}}</view>
				<view class="shangpin" v-if="shops_datas.price == 0">毛利率：0%</view>
				<view class="shangpin" v-else>毛利率：{{((shops_datas.price2 / shops_datas.price) * 100).toFixed(2)}}%
				</view>

			</view>
		</view>
		<view class="shangpin_bg" style="z-index: 0;position: relative;">
			<view class="shangpin_list_type">
				<view class="list_paixu" v-for="(shangpin,index1) in shangpin_types" :key="index1" :current="current"
					@click="choose_title(index1, current,shangpin)">
					<view class="">{{shangpin.title_name}}</view>
					<view class="">
						<image class="shengxu_img"
							:src="current == index1 && asc_show ? '../static/shengxu_xz.png' : '../static/shengxu.png'"
							mode="widthFix"></image>
						<image class="jiangxu_img"
							:src="current == index1 && desc_show ? '../static/jaingxu_xz.png' : '../static/jaingxu.png'"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scroll" :style="{height: scrollHeight}" :scroll-top="scrollTop"
			@scroll="scroll" @scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="shuji_list" v-else style="z-index: -2;position: relative;" v-for="(item,index) in items"
				:key="index">
				<view class="shuji_list_data">
					<view class="shuji_name">{{1+index}}、{{item.goods_name}}</view>
					<view class="data_list_num">
						<image class="bookimg" :src="item.goods_img" mode=""></image>
						<view class="">
							<view class="num_ml">{{item.goods_price * item.goods_number}}</view>
							<view class="num_lirun">{{item.goods_number}}</view>
						</view>
						<view class="lirun_price">
							<view class="">
								<view class="shuji_lilv">
									{{((item.goods_price - item.attr_jinprice) * item.goods_number).toFixed(2)}}
								</view>
								<view class="baifenbi">
									{{((item.goods_price - item.attr_jinprice) * item.goods_number / item.goods_price * 100).toFixed(2)}}%
								</view>
							</view>
							<image class="right_img" src="../../static/images/user/icon_right_arrow.png"
								mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				asc_show: false,
				desc_show: false,
				show: false,
				all_types: false,
				current1: 100,
				type_list: [{
					id: 1,
					type_name: '今日'
				}, {
					id: 2,
					type_name: '昨日'
				}, {
					id: 3,
					type_name: '本周'
				}, {
					id: 4,
					type_name: '本月'
				}, {
					id: 5,
					type_name: '本季'
				}, {
					id: 6,
					type_name: '本年'
				}],
				date_name: '请选择',
				date: '请选择',
				date_end: '请选择',
				shangpin_types: [{
					id: 0,
					title_name: '商品',
					field: 'shangpin',
				}, {
					id: 1,
					title_name: '销售额',
					field: 'xiaoshou',
				}, {
					id: 2,
					title_name: '毛利',
					field: 'maoli',
				}],
				order: '',
				current: 0,
				items: [],
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				shops_datas: {},
			}
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			choose_type(e) {
				console.log("选择了第几个", e);
				this.current1 = e.id
				this.date_name = e.type_name
				this.$H.post('v2/store/user/Grossprofit', {
					order: this.order,
					time: this.current1,
					// time: this.date + '~' + this.date_end,
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.items = res.data
						this.shops_datas = res.paginated
					}
					console.log("获取账户明细列表", res);
				})
				this.all_types = false
				this.show = false
			},
			choose_title(e, current, shangpin) {
				console.log("e", shangpin, current);
				this.field = shangpin.field
				var current = current
				if (current != e) {
					this.asc(e)
				} else {
					if (this.order == 'DESC') {
						this.asc(e)
					} else {
						this.desc(e)
					}
				}
				this.current = e

			},
			guanbi(e) {
				console.log("关闭", e);
			},
			asc(idx) {
				console.log("升序", idx);
				this.current = idx
				this.desc_show = false
				this.asc_show = true
				this.order = 'ASC'
				this.getDataList()
			},
			desc(idx) {
				console.log("将序", idx);
				this.current = idx
				this.desc_show = true
				this.asc_show = false
				this.order = 'DESC'
				this.getDataList()
			},
			all_shops_choose() {
				this.all_types = !this.all_types
				this.show = !this.show
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindDateChangeEnd(e) {
				this.date_end = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			queren() {
				this.$H.post('v2/store/user/Grossprofit', {
					order: this.order,
					// time: this.current1,
					time: this.date + '~' + this.date_end,
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.items = res.data
						this.shops_datas = res.paginated
					}
					console.log("获取账户明细列表", res);
				})
				this.all_types = false
				this.show = false
			},
			quxiao() {
				this.getDataList()
				this.current1 = 100
				this.date = '请选择'
				this.date_end = '请选择'
				this.all_types = false
				this.show = false
			},
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getDataList()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				console.log("eeeeeeeeeee", e);
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.items.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getDataList()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getDataList()
				}, 1000)
			},
			getDataList() {
				this.$H.post('v2/store/user/Grossprofit', {
					order: this.order,
					field: this.field,
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.u_loadmore = false
						this.items = res.data
						this.shops_datas = res.paginated
					}
					console.log("获取账户明细列表", res);
				})
			},
		}
	}
</script>

<style>
	.scroll {
		position: relative;
		z-index: 0;
	}

	.baifenbi {
		color: red;
		font-weight: 600;
	}

	.shuji_lilv {
		text-align: right;
		color: red;
		font-weight: 600;
	}

	.right_img {
		width: 35rpx;
		margin-top: 20rpx;
		margin-left: 8rpx;
	}

	.lirun_price {
		display: flex;
	}

	.num_lirun {
		font-size: 30rpx;
		color: #b2b2b2;
		font-weight: 600;
		text-align: right;
	}

	.num_ml {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
	}

	.bookimg {
		width: 150rpx;
		height: 150rpx;
		display: block;
	}

	.data_list_num {
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.shuji_name {
		font-size: 33rpx;
		color: #757575;
		font-weight: 600;
	}

	.shuji_list_data {
		width: 690rpx;
		margin: auto;
		padding: 20rpx 0 30rpx 0;
	}

	.shuji_list {
		width: 750rpx;
		border-bottom: 1px solid #eee;
	}

	.jiangxu_img {
		width: 15rpx;
	}

	.shengxu_img {
		width: 20rpx;
		margin-right: 5rpx;
	}

	.list_paixu {
		display: flex;
		align-items: center;
	}

	.shangpin_list_type {
		width: 690rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shangpin_bg {
		width: 750rpx;
		background-color: #f6f6f6;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.num-sp {
		padding: 30rpx 0 30rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.shangpin_list {
		width: 750rpx;
		background-color: #f2f6ff;
		margin-top: 77rpx;
	}

	.shangpin {
		font-size: 30rpx;
		color: #000;
		width: 40%;
		line-height: 45rpx;
	}

	.btn_list {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.queren_btn,
	.quxiao_btn {
		width: 200rpx;
		height: 70rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.queren_btn {
		color: #fff;
		background-color: #678ef4;
		margin-left: 30rpx;
	}

	.quxiao_btn {
		color: #6088f6;
		border: 1px solid #eee;
		margin-right: 30rpx;
	}

	.zhi {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
		margin: 0 50rpx 0 50rpx;
	}

	.uni-input {
		width: 250rpx;
		font-size: 32rpx;
		padding: 20rpx 0 20rpx 0;
		border-bottom: 4rpx solid #6088f6;
		font-weight: 600;
		text-align: center;
		color: #000;
	}

	.data-width {
		width: 690rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx auto auto;
	}

	.ziding_width {
		width: 690rpx;
		margin: 30rpx auto auto;
		justify-content: space-between;
	}

	.ziding {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
	}

	.absolute {
		width: 750rpx;
		background-color: #fff;
		position: absolute;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.choose-content {
		margin-left: 30rpx;
		padding: 20rpx 0 20rpx 0;
	}

	.tit-top-xz {
		font-size: 30rpx;
		color: #678ef4;
		font-weight: 600;
	}

	.tit-top {
		font-size: 30rpx;
		color: #9d9d9d;
		font-weight: 600;
	}

	.duiimg {
		width: 40rpx;
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.data-list-xz {
		width: 200rpx;
		position: relative;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #e6ebfe;
		justify-content: center;
	}

	.relative {
		position: fixed;
		top: 0;
	}

	.data-list {
		width: 200rpx;
		position: relative;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #f6f6f6;
		justify-content: center;
	}

	.all-shop-width {
		width: 33%;
		justify-content: center;
		padding-top: 20rpx;
	}

	.all-shop-pop {
		width: 700rpx;
		margin: auto;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.txt {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
	}

	.down_img {
		width: 35rpx;
		display: block;
		margin-left: 10rpx;
	}

	.choose_year {
		width: 750rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	page {
		background-color: #fff;
	}
</style>